<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title>查看</title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/pintuer.js}"></script>
</head>
<body>
<form method="post" action="/search" id="listform">
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 用户列表</strong> <a href=""
                                                                               style="float:right; display:none;">添加字段</a>
        </div>
        <div class="padding border-bottom">
            <ul class="search" style="padding-left:10px;">
                <li>
                    <form action="/search" method="post">
                        用户名:
                        <input type="text" placeholder="请输入搜索关键字" name="str" class="input"
                               style="width:250px; line-height:17px;display:inline-block"/>
                        <input type="submit" value="搜索" class="button border-main icon-search">
                    </form>
                </li>
            </ul>
        </div>
        <table class="table table-hover text-center">
            <tr>
                <th width="100" style="text-align:left; padding-left:20px;">编号</th>
                <th width="10%">ID</th>
                <th width="10%">姓名</th>
                <th>密码</th>
                <th width="310">操作</th>
            </tr>
            <div>
                <tr th:each="us,userStat :${page.getRecords()}">
                    <!--<td style="text-align:left; padding-left:20px;">${c.count}</td>-->
                    <td th:text="${userStat.count}"></td>
                    <td th:text="${us.getId()}"></td>
                    <td th:text="${us.getName()}"></td>
                    <td th:text="${us.getPassword()}"></td>
                    <td>
                    <td>
                        <div class="button-group"><a class="button border-main"
                                                     th:href="@{/toUpdate(id=${us.getId()})}">
                            <span class="icon-edit"></span> 修改</a>
                            <a class="button border-red" th:href="@{/delete(id=${us.getId()})}"
                               onclick="return del(1)"><span class="icon-trash-o"></span> 删除</a></div>
                    </td>
                </tr>
            </div>

        </table>
        <!-- 显示分页信息 -->
        <div >
            <!-- 分页条信息 -->
            <div class="pagelist">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <!--点击首页会跳转到第一页，并且首页禁用-->
                        <th:block th:if="${page.current==1}">
                            <li class="active,disabled">
                                <a>首页</a></li>
                        </th:block>

                        <th:block th:if="${page.current>1}">
                            <li><a th:href="@{/list(pn=1)}">首页</a></li>
                        </th:block>

                        <li th:if="${page.hasPrevious()}">
                            <a th:href="@{/list(pn=${page.getCurrent()-1})}">
                                <span aria-hidden="true">&laquo;</span>

                            </a>
                        </li>

                        <!--遍历页码，只显示五页，点击下一页之后，每次多遍历两个页码-->
                        <th:block th:if="${page.getCurrent()<=3}" th:each="i:${#numbers.sequence(1,5)}">
                            <!--加判断是不是当前页，如果是 高亮显示，并且取消超链接，这样避免了点击当前页重复发送请求查询数据-->
                            <th:block th:if="${page.getCurrent()==i}">

                                <li class="active">
                                    <a th:text="${i}"></a>
                                </li>
                            </th:block>

                            <th:block th:if="${page.getCurrent()!=i}">
                                <li>
                                    <a th:text="${i}" th:href="@{/list(pn=${i})}"></a>
                                </li>
                            </th:block>


                        </th:block>


                        <th:block th:if="${page.getCurrent()>3 && page.getCurrent()+2<=page.getPages()}"
                                  th:each="i:${#numbers.sequence(page.getCurrent()-2,page.getCurrent()+2)}">
                            <!--同理上-->
                            <th:block th:if="${page.getCurrent()==i}">

                                <li class="active">
                                    <a th:text="${i}"></a>
                                </li>
                            </th:block>

                            <th:block th:if="${page.getCurrent()!=i}">
                                <li>
                                    <a th:text="${i}" th:href="@{/list(pn=${i})}"></a>
                                </li>
                            </th:block>


                        </th:block>


                        <th:block th:if="${page.getCurrent()+2>page.getPages()}"
                                  th:each="i:${#numbers.sequence(page.getPages()-4,page.getPages())}">
                            <!--同理上-->
                            <th:block th:if="${page.getCurrent()==i}">

                                <li class="active,disabled">
                                    <a th:text="${i}"></a>
                                </li>
                            </th:block>

                            <th:block th:if="${page.getCurrent()!=i}">
                                <li>
                                    <a th:text="${i}" th:href="@{/list(pn=${i})}"></a>
                                </li>
                            </th:block>


                        </th:block>


                        <!--下一页-->
                        <li th:if="${page.hasNext()}">
                            <a th:href="@{/list(pn=${page.current+1})}">
                                <span aria-hidden="true">&raquo;</span>
                            </a></li>


                        <!--点击末页会跳转到最后一页，并且最后一页禁用-->
                        <th:block th:if="${page.current<page.pages}">
                            <li><a th:href="@{/list(pn=${page.pages})}">末页</a></li>

                        </th:block>

                        <th:block th:if="${page.current==page.pages}">
                            <li class="active,disabled"><a>末页</a></li>

                        </th:block>


                    </ul>
                </nav>
            </div>
            <!--分页文字信息  -->
            <div class="pagelist">当前 [[${page.current}]]页,总[[${page.pages }]]
                页,总[[ ${page.total }]] 条记录
            </div>
        </div>
        <!--           分页条的结束-->
    </div>
</form>
<script type="text/javascript">

    //搜索
    function changesearch() {

    }

    //单个删除
    function del(id, mid, iscid) {
        if (confirm("您确定要删除吗?")) {

        }
    }

    //全选
    $("#checkall").click(function () {
        $("input[name='id[]']").each(function () {
            if (this.checked) {
                this.checked = false;
            } else {
                this.checked = true;
            }
        });
    })

    //批量删除
    function DelSelect() {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {
            var t = confirm("您确认要删除选中的内容吗？");
            if (t == false) return false;
            $("#listform").submit();
        } else {
            alert("请选择您要删除的内容!");
            return false;
        }
    }

    //批量排序
    function sorts() {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {

            $("#listform").submit();
        } else {
            alert("请选择要操作的内容!");
            return false;
        }
    }


    //批量首页显示
    function changeishome(o) {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {

            $("#listform").submit();
        } else {
            alert("请选择要操作的内容!");

            return false;
        }
    }

    //批量推荐
    function changeisvouch(o) {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {


            $("#listform").submit();
        } else {
            alert("请选择要操作的内容!");

            return false;
        }
    }

    //批量置顶
    function changeistop(o) {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {

            $("#listform").submit();
        } else {
            alert("请选择要操作的内容!");

            return false;
        }
    }


    //批量移动
    function changecate(o) {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {

            $("#listform").submit();
        } else {
            alert("请选择要操作的内容!");

            return false;
        }
    }

    //批量复制
    function changecopy(o) {
        var Checkbox = false;
        $("input[name='id[]']").each(function () {
            if (this.checked == true) {
                Checkbox = true;
            }
        });
        if (Checkbox) {
            var i = 0;
            $("input[name='id[]']").each(function () {
                if (this.checked == true) {
                    i++;
                }
            });
            if (i > 1) {
                alert("只能选择一条信息!");
                $(o).find("option:first").prop("selected", "selected");
            } else {

                $("#listform").submit();
            }
        } else {
            alert("请选择要复制的内容!");
            $(o).find("option:first").prop("selected", "selected");
            return false;
        }
    }

</script>

</body>
</html>